// 运维人员管理
import './OperationMaintenance.scss';
import { useState, useEffect } from 'react';
import { Form, Input, Button, Select, Table,  Modal, } from '@arco-design/web-react';
import { IconExclamationCircle } from '@arco-design/web-react/icon';
import { geteOperationmaintenance, getselectMemberByConditions, geteaddMember, getuserList } from '../../../utils/api'
const FormItem = Form.Item;
const { Option } = Select;
const OperationMaintenance = () => {
  //表头数据
  const columns = [
    {
      title: '序号',
      dataIndex: 'userId',
      key: 'userId',
    },
    {
      title: '姓名',
      dataIndex: 'userName',
      key: 'userName',
    },
    {
      title: '手机号码',
      dataIndex: 'userPhone',
      key: 'userPhone',
    },
    {
      title: '联系邮箱',
      dataIndex: 'userMail',
      key: 'userMail',
    },
    {
      title: '身份证号码',
      dataIndex: 'userIdCardNum',
      key: 'userIdCardNum',
    },
    {
      title: '所属停车场',
      dataIndex: 'parkingName',
      key: 'parkingName',
    },
    // {
    //   title: '操作',
    //   key: 'action',
    //   render: (_, record) => (
    //     <Space size="middle">

    //       <a>删除</a>
    //     </Space>
    //   ),
    // },
  ];
  //表格数据
  const [data, setData] = useState([])
  //弹出框显示隐藏
  // const [editModalVisible, setIsModalVisible] = useState(false);
  //add的form
  const [addForm] = Form.useForm()
  //添加框的显示
  const showModal = () => {
    addForm.resetFields()
    setIsModalVisible(true);
  };
  //添加的取消
  const handleCancel = () => {
    setIsModalVisible(false);
  };
  //新增
  // const onAddFinish = (values) => {
  //   let data = addForm.getFieldsValue()
  //   geteaddMember().then((res) => {
  //     console.log(res);
  //     if (res.code == 200) {
  //       Message.success('添加成功');
  //       getdata();
  //     }

  //   })
  //   setIsModalVisible(false);
  // };


  // const [checkStrictly, setCheckStrictly] = useState(true);
  //查询按钮
  // const queryBtn = () => {
  //     console.log('查询按钮');
  //     let a = inputFrom.getFieldsValue()
  //     console.log(a);
  // }
  //重置按钮
  // const resetBtn = () => {
  //     inputFrom.clearFields()
  // }

  //发送请求获取表格数据
  const getdata = () => {
    geteOperationmaintenance().then((res) => {
      console.log(res.result);
      if (res.code == 200) {
        setData(res.result)
      }
    })
  }
  // 发送请求获取添加人员数据
  const getadd = () => {
    geteaddMember().then((res) => {
      console.log(res);
    })
  }
  //发送请求查询运维
  const getConditions = () => {
    getselectMemberByConditions().then((res) => {
      console.log(res);
    })
  }
  //发送请求姓名下拉框运维
  const getlist = () => {
    getuserList().then((res) => {
      console.log(res);
    })
  }
  useEffect(() => {
    getdata()
    getadd()
    getConditions()
    getlist()
  }, [])

  //点击新增弹框
  const [isModalVisible, setIsModalVisible] = useState(false);

  const handleChange = (value) => {
    console.log(`selected ${value}`);
  };


  return <div className='equipment'>
    <div className='formBox'>
      <FormItem label="人员姓名:" placeholder='请输入' className='formboxname' value="names">
        <Input />
      </FormItem>
      <FormItem label='所属位置:' field='Location' className="formboxLocation" value="positions">
        <Select
          placeholder='请选择'
          options={[
            {
              label: '停车场1',
              value: 0,
            },
            {
              label: '停车场2',
              value: 1,
            }
          ]}
          allowClear
        />
      </FormItem>
      <FormItem label="手机号码:" className='formboxphone'>
        <Input />
      </FormItem>
      <Button type="primary" className='formboxbtnquery'>查询</Button>
      <Button type="primary" className='formboxbtnquery' onClick={showModal} htmlType="button">+新增</Button>
      <Button className='formboxbtnreset'>重置</Button>


    </div>
    <div className='selectItem'>
      <p><span><IconExclamationCircle /></span>已选择<span>5</span>项   本次查询耗时：364 毫秒   <span>清空</span></p>
    </div>
    <Table
      rowKey={(record) => record.userId}
      rowSelection={{
        type: 'checkbox',
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(selectedRowKeys, selectedRows);
        },
        // checkStrictly,
      }}
      columns={columns}
      data={data}
      pagination={{
        pageItemStyle: { border: "1px solid #ccc", borderRadius: '5px' },
        activePageItemStyle: { backgroundColor: '#1890ff', color: '#fff' },
        sizeCanChange: true, showTotal: true,
        bufferSize: '2', size: 'size', pageSize: '5', options: 'large',
      }}
    />
    <Modal title="新增运维人员" visible={isModalVisible} 
    // onOk={onAddFinish} 
    onCancel={handleCancel}>
      <Form form={addForm}
        name="basic"
        labelCol={{
          span: 5,
        }}
        wrapperCol={{
          span: 16,
        }}>
        <Form.Item label="姓名" name="userName" >
          <Select
            defaultValue="lucy"
            style={{
              width: 120,
            }}
            onChange={handleChange}
          >
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
          </Select>
        </Form.Item>
        <Form.Item label="所属停车场" name="parkingName">
          <Input />
        </Form.Item>
      </Form>
    </Modal>

  </div>
}
export default OperationMaintenance

